<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:100px;height:100px;background: red;border-radius:50%;position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <input type="button" value="开始运动" class="start">
</body>
<script>

  var clientW = document.documentElement.clientWidth;
  var clientH = document.documentElement.clientHeight;

  var boxs = document.querySelectorAll(".box");
  var start = document.querySelector(".start");

  for(var i=0;i<boxs.length;i++){
    boxs[i].style.background = randomColor();
  }

  start.onclick = function(){
    for(var i=0;i<boxs.length;i++){
      move(boxs[i]);
    }
  }

  function move(ele){
    var X = random(3, 10);
    var Y = random(2, 6);

    if( ele.t ) return ;
    ele.t = setInterval(function(){
      if(ele.offsetLeft >= clientW - ele.offsetWidth){
        X = -X;
      }
      if(ele.offsetTop >= clientH - ele.offsetHeight){
        Y = -Y;
      }
      if(ele.offsetLeft < 0 ){
        X = -X;
      }
      if(ele.offsetTop < 0 ){
        Y = -Y;
      }

      ele.style.left = ele.offsetLeft + X + "px";
      ele.style.top = ele.offsetTop + Y + "px";

    }, 30);
  }

  function randomColor(){
    return "rgb("+ random(0,255) +","+ random(0,255) +","+ random(0,255) +")";
  }

  function random(num1, num2){
    return Math.round(Math.random()*(num1-num2)+num2)
  }


</script>
</html>